import React from 'react';
import { Modal, Form, Input, Button, Select } from 'antd';
import { FormInstance } from 'antd/lib/form';
import styles from '../index.less';

interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
}

const { Option } = Select;

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 12 },
};
const tailLayout = {
  wrapperCol: { offset: 4, span: 12 },
};

class Demo extends React.Component {
  constructor(props: any) {
    super(props);
  }
  formRef = React.createRef<FormInstance>();

  onResolutionChange = (value) => {
    this.formRef.current.setFieldsValue({
      // note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
    });
  };

  onFinish = (values) => {
    console.log(values);
  };

  // onReset = () => {
  //   this.formRef.current.resetFields();
  // };

  render() {
    // console.log(this.props.parent);
    return (
      <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
        <Form.Item name="name" label="名称编辑" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="resolution" label="分辨率" rules={[{ required: true }]}>
          <Select placeholder="请选择分辨率" onChange={this.onResolutionChange} allowClear>
            <Option value="1920x1080">1920x1080</Option>
            <Option value="1080x1920">1080x1920</Option>
            <Option value="other">自定义</Option>
          </Select>
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) =>
            prevValues.resolution !== currentValues.resolution
          }
        >
          {({ getFieldValue }) => {
            return getFieldValue('resolution') === 'other' ? (
              <Form.Item name="width" label="宽度" rules={[{ required: true }]}>
                <Input placeholder="px" />
              </Form.Item>
            ) : null;
          }}
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) =>
            prevValues.resolution !== currentValues.resolution
          }
        >
          {({ getFieldValue }) => {
            return getFieldValue('resolution') === 'other' ? (
              <Form.Item name="height" label="高度" rules={[{ required: true }]}>
                <Input placeholder="px" />
              </Form.Item>
            ) : null;
          }}
        </Form.Item>
        <Form.Item {...tailLayout} className={styles.footer}>
          <Button type="primary" htmlType="submit">
            确定
          </Button>
          <Button htmlType="button" onClick={this.props.parent.onCancel}>
            取消
          </Button>
          {/* <Button htmlType="button" onClick={this.onReset}>
            取消
          </Button> */}
        </Form.Item>
      </Form>
    );
  }
}

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { modalVisible, onCancel } = props;

  return (
    <Modal
      destroyOnClose
      title="新建"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      {/* {props.children} */}
      <Demo parent={props} />
    </Modal>
  );
};

export default CreateForm;
